<template>
	<div class="review-content">
		<h4 class="name">重算注单会员</h4>
		<el-table
			v-loading="loading"
			border
			size="mini"
			:data="tableData"
			style="width: 100%"
			:header-cell-style="getRowClass"
			highlight-current-row
			show-summary
			:summary-method="(val) => handleRow(val, subSummary)"
		>
			<el-table-column
				align="center"
				prop="memberName"
				label="会员账号"
				show-overflow-tooltip
				min-width="200"
			>
				<template slot-scope="scope">
					{{ scope.row.memberName || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				prop="teamRebateAmountRecalTy"
				label="体育团队返点重算调整"
				show-overflow-tooltip
				min-width="200"
			>
				<template slot-scope="scope">
					<span
						:style="
							handleNumberColor(scope.row.teamRebateAmountRecalTy)
						"
					>
						{{
							handleNumber(
								scope.row.currency,
								scope.row.teamRebateAmountRecalTy
							)
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				prop="teamRebateAmountRecalZr"
				label="真人团队返点重算调整"
				show-overflow-tooltip
				min-width="200"
			>
				<template slot-scope="scope">
					<span
						:style="
							handleNumberColor(scope.row.teamRebateAmountRecalZr)
						"
					>
						{{
							handleNumber(
								scope.row.currency,
								scope.row.teamRebateAmountRecalZr
							)
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				prop="teamRebateAmountRecalDj"
				label="电竞团队返点重算调整"
				show-overflow-tooltip
				min-width="200"
			>
				<template slot-scope="scope">
					<span
						:style="
							handleNumberColor(scope.row.teamRebateAmountRecalDj)
						"
					>
						{{
							handleNumber(
								scope.row.currency,
								scope.row.teamRebateAmountRecalDj
							)
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				prop="teamRebateAmountRecalCp"
				label="彩票团队返点重算调整"
				show-overflow-tooltip
				min-width="200"
			>
				<template slot-scope="scope">
					<span
						:style="
							handleNumberColor(scope.row.teamRebateAmountRecalCp)
						"
					>
						{{
							handleNumber(
								scope.row.currency,
								scope.row.teamRebateAmountRecalCp
							)
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				prop="operating"
				align="center"
				:label="$t('common.actions')"
				width="140px"
				fixed="right"
			>
				<template slot-scope="scope">
					<el-button
						type="text"
						size="medium"
						class="underline"
						@click="handleDetail(scope.row)"
					>
						查看
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<el-pagination
			v-show="!!total"
			:current-page.sync="pageNum"
			background
			class="pagination"
			layout="total, sizes,prev, pager, next, jumper"
			:page-size="pageSize"
			:page-sizes="pageSizes"
			:total="total"
			:pager-count="9"
			@current-change="handleCurrentChange"
			@size-change="handleSizeChange"
		></el-pagination>
		<el-dialog
			width="80%"
			:title="`${venueDetail.memberName || ''}的重算注单`"
			:visible.sync="innerVisible"
			append-to-body
		>
			<div class="content" v-loading="innerDialogLoading">
				<div v-if="venueMap">
					<Venue
						:rowData="rowData"
						:venueDetail="venueDetail"
						:venueMap="venueMap"
						type="ty"
						@finish="finish"
					/>
					<Venue
						:rowData="rowData"
						:venueDetail="venueDetail"
						:venueMap="venueMap"
						type="zr"
						@finish="finish"
					/>
					<Venue
						:rowData="rowData"
						:venueDetail="venueDetail"
						:venueMap="venueMap"
						type="dj"
						@finish="finish"
					/>
					<Venue
						:rowData="rowData"
						:venueDetail="venueDetail"
						:venueMap="venueMap"
						type="cp"
						@finish="finish"
					/>
					<Venue
						:rowData="rowData"
						:venueDetail="venueDetail"
						:venueMap="venueMap"
						type="hccp"
						@finish="finish"
					/>
				</div>
				<div
					v-if="
						!venueTypeMap.ty.tableData.length &&
						!venueTypeMap.zr.tableData.length &&
						!venueTypeMap.dj.tableData.length &&
						!venueTypeMap.cp.tableData.length &&
						venueTypeMap.ty.isFinish &&
						venueTypeMap.zr.isFinish &&
						venueTypeMap.dj.isFinish &&
						venueTypeMap.cp.isFinish
					"
				>
					<el-empty />
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import list from '@/mixins/list'
import summaryList from './summaryList'
import Venue from './venue.vue'
export default {
  components: {
    Venue
  },
  mixins: [list, summaryList],
  props: {
    rowData: {
      type: Object,
      default: () => { }
    },
    venueMap: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      tableData: [],
      subSummary: {},
      innerVisible: false,
      venueDetail: {},
      innerDialogLoading: true,
      venueTypeMap: {
        ty: {
          isFinish: false,
          tableData: []
        },
        zr: {
          isFinish: false,
          tableData: []
        },
        dj: {
          isFinish: false,
          tableData: []
        },
        cp: {
          isFinish: false,
          tableData: []
        }
      }
    }
  },
  methods: {
    finish(val) {
      this.innerDialogLoading = false
      this.venueTypeMap[val.type] = val
    },
    handleDetail(val) {
      this.venueDetail = val
      this.innerVisible = true
    },
    loadData() {
      let params = {
        memberId: this.rowData.memberId,
        recalType: this.rowData.changeStatus,
        reportDate: this.rowData.reportDate,
        startDate: this.rowData.reportDate,
        endDate: this.rowData.reportDate,
        proxyId: this.rowData.proxyId
      }
      params = this.getParams(params)
      this.loading = true

      this.$api.reportRecalProxyRecalMemberList(params).then(res => {
        const { record, totalRecord, summary } = res.data || {}
        this.tableData = record || []
        this.total = totalRecord || 0
        this.subSummary = summary || {}
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.pagination{
	display: flex;
	justify-content: flex-end;
	padding: 10px;
}
.content{
	min-height: 200px;
}
</style>
